import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import TopNav from '../../component/TopNav';
import './index.scss'
import { SearchBar } from 'antd-mobile'
import myaxios from '../../utils/myaxios'

class index extends Component {
  state = {
    inputValue: '',
    searchBox: []
  }

  componentDidMount() {

  }

  handleSearchClick = () => {
    myaxios.get('goods/qsearch', { params: { query: this.state.inputValue } }).then(data => {
      this.setState({ searchBox: data.message })
      console.log(data);
    })
  }
  handleToGoodDetail = (e) => {
    let good_id = e.target.getAttribute("data-index")
    this.props.history.push("/goodDdetail/" + good_id)
  }
  render() {
    return (
      <div className="yg-sc">
        <TopNav leftIcon={true} onLeftClick={() => console.log('onLeftClick')}>搜索中心</TopNav>
        <SearchBar
          value={this.state.inputValue}
          placeholder="Search"
          onSubmit={value => console.log(value, 'onSubmit')}
          onCancel={this.handleSearchClick}
          showCancelButton
          cancelText="搜索"
          onChange={(value) => this.setState({ inputValue: value })}
        />
        <div className="yg-sc-inp">
          <div className="yg-sc-itemList" onClick={this.handleToGoodDetail}>
            {
              this.state.searchBox.map(v => (
                <div className="yg-sc-item" key={v.goods_id}>
                  <img data-index={v.goods_id} src="https://zos.alipayobjects.com/rmsportal/XmwCzSeJiqpkuMB.png" alt="" />
                  <h3 data-index={v.goods_id}>{v.goods_name}</h3>
                </div>
              ))
            }
          </div>

        </div>

      </div>
    )
  }
}

export default withRouter(index)